<!--
Copyright Yahoo Inc.
SPDX-License-Identifier: Apache-2.0
-->
<template>
  <BRow
    gutter-x="1"
    class="text-start flex-nowrap d-flex justify-content-between"
    align-h="start"
    @keyup.stop.prevent.enter="sendAction">
    <BCol cols="auto">
      <SegmentSelect v-model:segments="segments" />
    </BCol>

    <BCol
      cols="auto"
      class="flex-fill">
      <div class="input-group input-group-sm">
        <span class="input-group-text">
          {{ $t('sessions.tags') }}
        </span>
        <input
          autofocus
          type="text"
          v-model="tags"
          class="form-control"
          :placeholder="$t('sessions.tagsPlaceholder')">
      </div>
      <p
        v-if="error"
        class="small text-danger mb-0">
        <span class="fa fa-exclamation-triangle" />&nbsp;
        {{ error }}
      </p>
    </BCol>

    <BCol cols="auto">
      <button
        type="button"
        @click="sendAction"
        :title="$t('sessions.send.send')"
        :class="{'disabled':loading}"
        class="btn btn-sm btn-theme-tertiary me-1">
        <span v-if="!loading">
          <span class="fa fa-paper-plane-o" />&nbsp;
          {{ $t('sessions.send.send') }}
        </span>
        <span v-else>
          <span class="fa fa-spinner fa-spin" />&nbsp;
          {{ $t('common.sending') }}
        </span>
      </button>
      <button
        type="button"
        id="cancelSendBtn"
        @click="$emit('done', null, false, false)"
        class="btn btn-sm btn-warning">
        <span class="fa fa-ban" />
        <BTooltip target="cancelSendBtn">
          {{ $t('common.cancel') }}
        </BTooltip>
      </button>
    </BCol>
  </BRow>

  <div class="row mt-2">
    <div class="col">
      <p class="text-info small mb-0">
        <em>
          <strong>
            <span class="fa fa-info-circle me-2" />
            {{ $t('sessions.send.info') }}
          </strong>
        </em>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import SessionsService from './SessionsService';
import SegmentSelect from './SegmentSelect.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// Define Props
const props = defineProps({
  cluster: {
    type: String,
    default: ''
  },
  start: {
    type: Number,
    default: 0
  },
  applyTo: {
    type: String,
    default: 'open'
  },
  sessions: {
    type: Array,
    default: () => []
  },
  numVisible: {
    type: Number,
    default: 0
  },
  numMatching: {
    type: Number,
    default: 0
  }
});

// Define Emits
const emit = defineEmits(['done']);

// Reactive state
const error = ref('');
const loading = ref(false);
const segments = ref('no');
const tags = ref(''); // This is named 'tags' but might be used for other purposes in send context or just for consistency

// Access route
const route = useRoute();

// Methods
const sendAction = async () => {
  error.value = ''; // Clear previous errors
  loading.value = true;

  const data = {
    tags: tags.value, // If tags are not relevant for "send", this might need adjustment based on actual API
    start: props.start,
    cluster: props.cluster,
    applyTo: props.applyTo,
    segments: segments.value,
    sessions: props.sessions,
    numVisible: props.numVisible,
    numMatching: props.numMatching
  };

  try {
    const response = await SessionsService.send(data, route.query);
    tags.value = ''; // Clear input on success
    loading.value = false;

    let reloadData = false;
    // Only reload data if action was on a single session
    if (data.sessions && data.sessions.length === 1) {
      reloadData = true;
    }

    emit('done', response.text, true, reloadData); // Emit the done event with the response text
  } catch (err) {
    // Display the error under the form so that user
    // has an opportunity to try again (don't close the form)
    error.value = err.text || err.message || t('sessions.send.unknownErr');
    loading.value = false;
  }
};
</script>
